<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>ToDoList-compo</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <div>
            <input v-model='task' type="text" placeholder="请输入任务" v-on:keyup.enter='handleKeyup'>

        </div>
        <ul>
            <!-- <li v-for="(li, index) in list">
                {{li}} <button v-on:click="handleClick(index)">删除任务</button>
            </li> -->
            <my-li 
                v-for="(li, i) in list"
                v-bind:title="li"
                v-bind:index="i"
                v-bind:list="list"
            ></my-li>
            <!-- <my-li title="bbb"></my-li>
            <my-li title="ccc"></my-li>
            <my-li title="ddd"></my-li> -->
        </ul>

    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.component('my-li',{
            props:['title','index','list'],
            template:`
            <li>{{title}}<button v-on:click="handleClick">删除任务</button></li>`,
            methods:{
                handleClick() {
                    this.list.splice(this.index,1)
                }
            },
        })//kebab-case肉串写法 camelCase小驼峰 ParscalCase大驼峰


        new Vue({
            el: "#app",
            data: {
                task: '',
                list: [
                    'task1'
                ],
            },
            methods: {
                handleKeyup() {
                    this.list.push(this.task)
                    this.task = ''
                },
                handleClick(index) {
                    console.log(index);
                    this.list.splice(index,1)
                }
            },
        })
    </script>
</body>

</html>